<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>

    </style>
    <title>HDUDB</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
                HDUDB</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.gzblog.tech/">我的博客</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            目录
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">登陆</a>
                    </li>
                </ul>
                <form class="d-flex" action="{% url 'lesson:search' %}" method="POST">
                    {% csrf_token %}
                    <input class="form-control me-2" type="search" placeholder="搜索课程和评论" aria-label="Search"
                        name="keywords">
                    <button class="btn btn-outline-success" type="submit">🔍</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-4 m-1">
        {% for lesson in lessons %}
        <div class="col">
            <div class="card h-100">
                <div class="card-header">
                    {{lesson.name}}
                    <small class="text-muted">by {{ lesson.teacher }}</small>
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0" style="padding-bottom: 1rem;">
                        <p style="font-size: small;">
                            {{ lesson.bestcomment.comment }}
                            <footer class="blockquote-footer text-end"> {{ lesson.bestcomment.term }} <cite
                                    title="Source Title">{{ lesson.bestcomment.name }}</cite>
                            </footer>
                    </blockquote>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'lesson:lesson' lesson.id %}" class="btn btn-primary ">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        <div class="col">
            <div class="card h-100">
                <div class="card-header">
                    如何锻造一把锤子3
                    <small class="text-muted">by luoyonghao</small>
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0" style="padding-bottom: 1rem;">
                        <p style="font-size: small;">
                            在这门课程中，罗永浩老师将手把手教同学们锻造一把锤子。简单的说，将一个铁块切成合适的大小，并打一个洞，然后把锤子柄插进去这一段是我瞎编的。</p>
                        <footer class="blockquote-footer text-end"> 2021-6-17 <cite title="Source Title">沃兹基硕德</cite>
                        </footer>
                    </blockquote>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="#" class="btn btn-primary ">查看详情</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card h-100">
                <div class="card-header">
                    如何锻造一把锤子3
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0" style="padding-bottom: 1rem;">
                        <p style="font-size: small;">
                            在这门课程中，罗永浩老师将手把手教同学们锻造一把锤子。简单的说，将一个铁块切成合适的大小，并打一个洞，然后把锤子柄插进去这一段是我瞎编的。</p>
                        <footer class="blockquote-footer text-end"> 2021-6-17 <cite title="Source Title">沃兹基硕德</cite>
                        </footer>
                    </blockquote>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="#" class="btn btn-primary ">查看详情</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card h-100">
                <div class="card-header">
                    如何锻造一把锤子4
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0" style="padding-bottom: 1rem;">
                        <p style="font-size: small;">
                            在这门课程中，罗永浩老师将手把手教同学们锻造一把锤子。简单的说，将一个铁块切成合适的大小，并打一个洞，然后把锤子柄插进去这一段是我瞎编的。
                        </p>
                        <footer class="blockquote-footer text-end"> 2021-6-17 <cite title="Source Title">沃兹基硕德</cite>
                        </footer>
                    </blockquote>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="#" class="btn btn-primary ">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
    </script>
</body>

</html>